<template>
<div>
  <el-drawer
    :with-header="false"
    :visible.sync="drawer"
    direction="rtl"
    :before-close="close"
    size="75%"
    :append-to-body="true"
    destroy-on-close
    :modal-append-to-body="false"
  >
    <el-button type="primary" class="drawer-close-btn" @click="close"><i class="rp rp-d-arrow-right close-icon"></i></el-button>
    <div class="drawer-con-wrap">
      <div class="drawer-header">
        <div class="header-name">客户</div>
        <div class="custom-header">
          <div class="header-left">
            <el-tooltip class="item" effect="dark" :content="detailData.customerName" placement="top">
              <span class="customer-name">{{detailData.customerName}}</span>
            </el-tooltip>

            <div>
              <i v-if="detailData.status == 2" class="rp rp-circle-password" />
              <el-tooltip v-if="true" :content="detailData.star == 0 ? '添加关注' : '取消关注'" effect="dark" placement="top">
                <i
                  v-if="detailData.star == 0"
                  class="el-icon-star-off focus-icon"
                  @click="toggleStar()" />
                <i
                  v-else
                  class="rp rp-focus-on focus-icon active"
                  @click="toggleStar()" />
              </el-tooltip>
            </div>

            <div class="arrow-list">
              <el-button><i class="el-icon-arrow-left"></i></el-button>
              <el-button><i class="el-icon-arrow-right"></i></el-button>
            </div>
            
          </div>
          <div class="header-right">
            <el-button><i class="el-icon-arrow-left"></i>呼叫中心</el-button>
            <el-button type="primary">编辑</el-button>
            <el-button>更改成交状态</el-button>
            <el-button><i class="el-icon-more"></i></el-button>
          </div>
        </div>

        <!-- 编辑标签 -->
        <div class="link mt8">
          <el-tooltip class="item" effect="dark" content="编辑标签" placement="top">
            <i class="rp rp-icon-label-solid pointer edit-link"></i>
          </el-tooltip>
        </div>
        <!-- btn-list -->
        <div class="mt8">
          <el-button @click="btnAdd(3)">创建回款</el-button>
        </div>

        <div class="custom-base mt8">
          <div class="custom-base-item">
            <div class="item-label">客户名称</div>
            <div class="item-value mt8">高级</div>
          </div>
          <div class="custom-base-item">
            <div class="item-label">合同金额(元)</div>
            <div class="item-value mt8"></div>
          </div>
          <div class="custom-base-item">
            <div class="item-label">下单时间</div>
            <div class="item-value mt8">{{detailData.ownerUserName}}</div>
          </div>
          <div class="custom-base-item">
            <div class="item-label">回款金额</div>
            <div class="item-value mt8">{{detailData.contactsName}}</div>
          </div>
          <div class="custom-base-item">
            <div class="item-label">负责人<i class="rp rp-icon-fill-help rp-help-tips ml4"></i></div>
            <div class="item-value mt8 phone"><i class="rp rp-circle-iphone" style="margin-right:4px"></i>{{detailData.contactsMobile}}</div>
          </div>
        </div>


        <!--  -->
        <div class="info-block-wrap">
            <div class="info-left-wrap">
              <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="详细资料" name="particular">
                  <EditBaseInfo></EditBaseInfo>
                </el-tab-pane>
                <el-tab-pane label="活动" name="activity">
                  <activityBlock/>
                </el-tab-pane>
                <el-tab-pane label="产品" name="RelativeProduct">
                  <RelativeProduct></RelativeProduct>
                </el-tab-pane>
                <el-tab-pane label="回访" name="RelativeVisit">
                 <RelativeVisit></RelativeVisit>
                </el-tab-pane>
                <el-tab-pane label="发票" name="invice">
                  <invoice></invoice>
                </el-tab-pane>
                <el-tab-pane label="附件" name="accessoryBlock">
                  <accessoryBlock></accessoryBlock>
                </el-tab-pane>
                <el-tab-pane label="操作记录" name="relativeHandle">
                  <RelativeHandle></RelativeHandle>
              </el-tab-pane>
              </el-tabs>
            </div>
            <ExamineInfo ref="ExamineInfo"/>
        </div>
      </div>
    </div>
  </el-drawer>
  <addDialog ref="addDialog" :dialogTitle="dialogTitle" :list="listFrom" :dialogType="dialogType"></addDialog>
  </div>
</template>
<script>
import data from './drawerJS/data.js';
//详细资料
import EditBaseInfo from '@/components/BasicInformation/EditBaseInfo.vue'
//活动
import activityBlock from '@/components/busComponents/activityBlock'
//产品
import RelativeProduct from '@/components/busComponents/tabDrawer/RelativeProduct.vue'
//发票---新增
import invoice from '@/components/busComponents/invoice/index.vue'
//回访
import RelativeVisit from '@/components/busComponents/tabDrawer/RelativeVisit.vue'
//审核记录
import ExamineInfo from '@/components/busComponents/Examine/ExamineInfo.vue'; 
//附件
import accessoryBlock from '@/components/busComponents/accessoryBlock/index.vue';
//操作记录
import RelativeHandle from '@/components/busComponents/RelativeHandle' 

import DetailMixin from '@/mixins/Detail'
import addDialog from '@/components/DialogCustom/addDialog.vue' 
import dataadd from '@/components/DialogCustom/dataadd.js'

export default {
  name: 'seaDrawer',
  components:{activityBlock,invoice,ExamineInfo,RelativeHandle,accessoryBlock,RelativeVisit,addDialog,RelativeProduct,EditBaseInfo},
  mixins:[DetailMixin],
    data(){
      return{
        drawer:false,
        detailData:data.info,
        customSbstractFlg:true,
        activeName:'activity',
        dialogTitle:'',
        listFrom:[],
        dialogType:1,
      }
    },
    methods:{
      btnAdd(index){
        this.dialogType = index;
        if(index == 1){
          this.dialogTitle = "创建联系人"
          this.listFrom = JSON.parse(JSON.stringify(dataadd.phone)).data
        }
        if(index == 2){
          this.dialogTitle = "创建合同"
          this.listFrom = JSON.parse(JSON.stringify(dataadd.hetong)).data
        }
        if(index == 3){
          this.dialogTitle = "创建回款"
          this.listFrom = JSON.parse(JSON.stringify(dataadd.huikuan)).data
        }
        this.$refs.addDialog.showFun();
      },
      show(){
        this.drawer = true;
      },
      close(){
        this.drawer = false;
      },
      handleClick(){

      },
        /**
       * isSeas 是从公海模块传入的 配合详情is_pool字段确定
       */
      isSeasDetail() {
        if (this.detailData && this.detailData.hasOwnProperty('isPool')) {
          return this.detailData.isPool == 1
        }
        return this.isSeas
      },
    }
}
</script>
<style lang="scss" scoped>
.drawer-close-btn{
  position: fixed;
  top: 160px;
  // left: -12px;
  margin-left: -52px;
  z-index: 1;
  padding: 6px;
  background-color: #0052cc;
  border-color: #0052cc;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  .close-icon{
    font-size: 26px;
  }
}
.drawer-con-wrap{
  .mt8{
    margin-top: 8px;
  }
  padding: 32px 32px 16px;
  .drawer-header{
    .header-name{
      font-size: 14px;
      color: #6b778c;
    }
    .custom-header{
      margin-top: 2px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .header-left{
        display: flex;
        align-items: center;
        .customer-name{
          font-size: 22px;
          font-weight: 700;
          color: #172b4d;
        }
        .arrow-list{
          margin-left: 24px;
        }
      }
    }

    .link{
      .edit-link{
        font-size: 16px;
        margin-left: 8px;
      }
    }

    .custom-base{
      padding: 16px;
      background-color: #f4f5f7;
      border-radius: 3px;
      display: flex;
      align-items: stretch;
      flex-direction: row;
      .custom-base-item{
        flex: 0 0 20%;
        .item-label{
          color: #6b778c;
        }
        .item-value{
          color: #172b4d;
          font-weight: 500;
        }
        .phone{
          color: #36b37e;
        }
      }
    }

    .info-block-wrap{
      display: flex;
      margin-top: 16px;
      align-items: stretch;
      flex-direction: row;
      .info-left-wrap{
        flex: 1;
        padding-right: 40px;
        overflow: hidden;
        width: 100%;
      }
    }

    
  }
}
</style>